import { FC } from "react";
import contentStyle from "../../../index.module.scss";
import ColorItem from "../../colors/colorItem";
// import { useCustomizationStore, usePersonalDetailsStore } from "@/store";
import { batchUpdateCustomization } from "../../layout";
import { produce } from "immer";
import { useCustomizationStore } from "@/src/providers/customization-store-provider";
import { usePersonalDetailStore } from "@/src/providers/personal-detail-store-provider";

interface IndexProps {}

const Index: FC<IndexProps> = () => {
  const { updatetTitle, addCustomization, customization } =
    useCustomizationStore(
      (state) => state,
      (o, n) => {
        return o.customization.title === n.customization.title;
      }
    );
  const { title } = customization;
  const { showIcon, style, titleBkg, showTitleStyle, showTitleBkg } =
    title || {};

  const run = (data) => {
    batchUpdateCustomization({
      updates: data,
      id: customization.id,
    });
  };
  const { personalDetails } = usePersonalDetailStore(
    (state) => state,
    (o, n) => {
      return o.personalDetails.id === n.personalDetails.id;
    }
  );
  const onChange = (key, v) => {
    const data = produce(customization.title, (draft) => {
      draft[key] = v;
    });

    if (customization.id) {
      run([
        {
          path: `title.${key}`,
          value: data[key],
        },
      ]);
    } else if (personalDetails.id) {
      updatetTitle(data);
      addCustomization(personalDetails.id);
      return;
    }
    updatetTitle(data);
  };
  return style !== "simple" && showTitleBkg !== false ? (
    <>
      <h1 className={contentStyle.subtitle} style={{ marginBottom: "10px" }}>
        标题背景色
      </h1>
      <ColorItem
        onChange={(color) => {
          onChange("titleBkg", color);
        }}
        color={titleBkg || ""}
        style={{ left: "0" }}
      ></ColorItem>
    </>
  ) : null;
};

export default Index;
